import React, { useEffect, useState } from 'react'
import { View,Image, Text, Picker, Textarea } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import { throttle } from '@/utils/Tools';

import './index.scss'

export default function Activity() {
  let numberList = ['60-80人','81-100人','100人以上']
  const [curMonth, setcurMonth] = useState(0)
  const [curDate, setcurDate] = useState(0)
  const [curNumber, setcurNumber] = useState(0)
  const [reason, setreason] = useState(0)
  const [curCity, setcurCity] = useState({})
  const [dateList, setdateList] = useState([])
  const [isAgree, setisAgree] = useState([])

  useEffect(()=>{
    Taro.removeStorageSync('selectCity')
    Taro.showLoading({
      title:'加载中...'
    })
    Taro.$get('/act/topic','',1).then(res=>{
      if(res.code == '1'){
        setdateList(res.content || [])
      }else{
        Taro.$toast(res.message)
      }
    })
  },[])
  useDidShow(()=>{
    setcurCity(Taro.getStorageSync('selectCity') || {})
  })
  
  function handlePrevDate(){  //  选择上一个日期
    setcurDate(0)
    let value = curMonth
    if(value == 0){
      setcurMonth(dateList.length-1)
      return;
    }
    value = value - 1
    setcurMonth(value)
  }
  function handleNextDate(){  //  选择下一个日期
    setcurDate(0)
    let value = curMonth
    if(value == dateList.length-1){
      setcurMonth(0)
      return;
    }
    value = value + 1
    setcurMonth(value)
  }
  
  const handleSubmit = throttle(async ()=>{
    if(!isAgree){
      Taro.$toast('请先阅读发起活动申请须知')
      return;
    }
    const data = {
      "cityCode": curCity.cityCode,
      "cityName": curCity.name,
      "price": dateList[curMonth].topicDays[curDate].topic.price,
      'forecastPerson':numberList[curNumber],
      "reason": reason,
      "topicId": dateList[curMonth].topicDays[curDate].topic.id
    }
    if(!data.cityCode){
      Taro.$toast('请先选择活动城市')
      return;
    }
    if(!data.forecastPerson){
      Taro.$toast('请先选择预计人数')
      return;
    }
    Taro.showLoading({
      title:'加载中...'
    })
    const res = await Taro.$post('/act/topicOrder',data,1)
    if(res.code === '1'){
      if(res.content.result == '0'){
        Taro.redirectTo({
          url:`/orderSubPack/pay-status/index?id=${res.content.orderId}`
        })
        return;
      }
      Taro.navigateTo({
        url:`/pages/fineEngine/payment?id=${res.content.orderId}&fromFlag=orderCenter`
      })
    }else{
      Taro.$toast(res.message)
    }
  },2000)
  
  return (
    dateList.length?
    <View className="activity-index">
      <View className="index-header">
        <Image src={dateList[curMonth]?.topicDays[curDate]?.topic?.mainImageUrl} className="header-img"></Image>
        <View className="header-info">
          <View className="dot2 h2">{dateList[curMonth]?.topicDays[curDate]?.topic?.title}</View>
          <View className='p'>#英雄联盟影院观赛</View>
          <hr style="height: 1px;border:none;border-top:1px solid #394f6a;margin: 10rpx 0;" />
          <View>{dateList[curMonth]?.topicDays[curDate]?.topic?.timeFormat} | {dateList[curMonth]?.topicDays[curDate]?.topic?.totalMinute}分钟</View>
        </View>
      </View>
      <View className="index-box">
        <View className="index-date">
          <View className='h5'>活动日期</View>
          <View className="date-select">
            <Image onClick={()=>{handlePrevDate()}} src={require('@/static/icon-arrow-l-black.png')} className="select-arrow"></Image>
            <Text className='span'>{dateList[curMonth]?.topicMonth}</Text>
            <Image onClick={()=>{handleNextDate}} src={require('@/static/icon-arrow-l-black.png')} className="select-arrow select-right"></Image>
            <Image src={require('@/static/icon_calendar.png')} className="select-icon"></Image>
          </View>
          <View className="date-list not-bar">
            {dateList[curMonth].topicDays?.map((item,index)=>{
              return <View className={`list-item ${index == curDate?'active':''}`} key={index} onClick={()=>{setcurDate(index)}}>
              <View className='h3'>{item.day.split('-')[2]}</View>
              {item.dayWeek}
            </View>
            })}
          </View>
        </View>
        <View className="index-main">
          <View className="main-box">
            <View className='h5' style="margin-bottom: 32rpx;">活动城市</View>
            <View className="curCity.name?'box-flex':'box-flex placeholder'" onClick={()=>{
              Taro.navigateTo({
                url:'/mainPages/city-list/index?type=back'
              })
            }}>{curCity.name || '请选择活动所在城市'} <Image className="box-icon" src={require('@/static/icon-arrow-l-black.png')}></Image></View>
          </View>
          <View className="main-box">
            <View className='h5' style="margin-bottom: 32rpx;">预计人数</View>
            <Picker range={numberList} onChange={e=>{setcurNumber(e.target.value)}}>
              <View className={`box-flex ${curNumber>=0?'':'placeholder'}`} >{numberList[curNumber] || '请选择预计的活动参数人数'} <Image className="box-icon" src={require('@/static/icon-arrow-l-black.png')}></Image> </View>
            </Picker>
          </View>
          <View className="main-box">
            <View className='h5'>发起活动说明</View>
            <View className="main-info">
              <View className='p'><Text className="span">1.</Text><Text className='strong'>成员招募：</Text>活动购票上座率达到70%以上，活动结束后，发起活动的订单金额向发起人全额退款；如果上座率未达到70%，活动结束后，按订单金额减去其他团员购票的总金额向发起人退款。</View>
              <View className='p'><Text className="span">2.</Text><Text className='strong'>退款说明：</Text>如果购票上座率已经达到70%，则活动不可取消，发起活动的订单将在活动结束后自动全额退款；如果购票上座率未达到70%，且距离活动开始时间72小时以上，发起人申请取消活动需要承担发起活动订单金额10%的手续费；<Text style="color: #f73;">由于活动的特殊性，距离活动开始不足72小时，发起活动的订单不再支持取消活动申请。</Text></View>
            </View>
          </View>
          <View className="main-box">
            <View className='h5'>申请理由</View>
            <Textarea className="textarea" onInput={e=>{
              setreason(e.target.value)
            }} cols="30" rows="10" placeholder="请简单说明发起本次活动的理由和计划"></Textarea>
          </View>
        </View>
      </View>
      <View className="index-button">
        <View className="button-info">
          {isAgree?<Image src={require('@/static/status-radio-on@2x.png')} style="width: 32rpx; margin-right: 10rpx;" onClick={()=>{setisAgree(false)}} mode="widthFix"></Image>:<Image v-else src={require('@/static/status-radio-unselected@2x.png')} style="width: 32rpx; margin-right: 10rpx;" mode="widthFix" onClick={()=>{setisAgree(true)}}></Image>}
          阅读 <Text className='span sub-theme'>《发起活动申请须知》</Text>
        </View>
        <View className="button-main" onClick={()=>{handleSubmit()}}>¥{dateList[curMonth].topicDays[curDate].topic.price}  发起活动</View>
      </View>
    </View>:null
  )
}
